<template>
  <view class="table-h5-footer top-header-uni" :style="{paddingRight:`${scrollbarSize}px`}">
    <!-- 🎯 固定列合计行 -->
    <view v-if="fixedLeftColumns && fixedLeftColumns.length > 0"
          class="next-table-fixed-left-footer"
          :style="{
            width: fixedLeftWidth + 'px',
            position: 'absolute',
            left: 0,
            top: 0,
            zIndex: 20,
            background: '#fafafa',
            borderTop: border ? '1px solid #e8e8e8' : ''
          }">
      <view class="next-table-fixed">
        <view class="next-table-thead" style="position: relative;">
          <view class="item-tr">
            <view
              class="item-th"
              :style="{
                width:`${item.width?item.width:'100'}px`,
                flex:'none',
                minWidth:`${item.width?item.width:'100'}px`,
                borderRight:`${border?'1px solid #e8e8e8':''}`,
                textAlign:item.align||'left'
              }"
              v-for="(item,index) in fixedLeftColumns" :key="'fixed-'+index">
              {{ sums[index] }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 🎯 滚动列合计行 -->
    <scroll-view
			class="next-table-headers"
			@scroll="handleFooterTableScrollLeft"
			scroll-x="true"
			scroll-y="false"
			id="tableFooterHeaders"
			scroll-anchoring="true"
			:scroll-left="headerFooterTableLeft"
			:style="{
					'padding-bottom': '0px',
					'background': '#fafafa',
					'height': '100%',
					'margin-left': (fixedLeftColumns && fixedLeftColumns.length > 0 ? fixedLeftWidth : 0) + 'px'
				}">
      <view class="next-table-fixed">
        <view class="next-table-thead" style="position: relative;" >
          <view class="item-tr">
            <view
							class="item-th"
							:style="{
								width:`${item.width?item.width:'100'}px`,
								flex:index===scrollColumns.length-1?1:'none',
								minWidth:`${item.width?item.width:'100'}px`,
								borderRight:`${border?'1px solid #e8e8e8':''}`,
								textAlign:item.align||'left'
							}"
							v-for="(item,index) in scrollColumns" :key="'scroll-'+index">
              {{ sums[fixedLeftColumns.length + index] }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
import summary from '../js/summary.js'
export default {
  name:'table-footer',
  mixins:[summary],
  computed: {
    // 🎯 计算固定列宽度
    fixedLeftWidth() {
      if (!this.fixedLeftColumns || this.fixedLeftColumns.length === 0) {
        return 0
      }
      return this.fixedLeftColumns.reduce((total, col) => {
        return total + (col.width || 100)
      }, 0)
    },
    // 🎯 计算滚动列（排除固定列）
    scrollColumns() {
      if (!this.fixedLeftColumns || this.fixedLeftColumns.length === 0) {
        return this.transColumns
      }
      return this.transColumns.filter(col => !col.fixed)
    }
  }
}
</script>
<style lang="scss" scoped>
.table-h5-footer {
  background: #fafafa;
  /*每个页面公共css */
  scroll-view ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }
  //第二种
  ::-webkit-scrollbar{
    display: none;
  }
  .item-tr{
    display: flex;
  }
  .item-th{
    padding-left: 8px;
    line-height: 39px;
    height: 40px;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100px;
    padding-right: 20px;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    border-bottom: 1px solid #e8e8e8;
  }
}

/* 🎯 固定列合计行样式 */
.next-table-fixed-left-footer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  background: #fafafa;
  /* 性能优化 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: auto;

  .next-table-fixed {
    .next-table-thead {
      .item-tr {
        display: flex;

        .item-th {
          padding-left: 8px;
          line-height: 39px;
          height: 40px;
          box-sizing: border-box;
          flex-shrink: 0;
          width: 100px;
          padding-right: 20px;
          word-break: keep-all;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          overflow-wrap: break-word;
          border-bottom: 1px solid #e8e8e8;
          background: #fafafa;
        }
      }
    }
  }
}
</style>
